<!-- FirstView1.vue -->
<template>
  <el-container style="display: flex; height: 100vh;">
    <!-- 侧边栏菜单 -->
    <el-aside width="200px" style="height: 100%; background-color: #D3DCE6; position: relative;">
      <el-menu
          :default-active="activeIndex"
          @select="handleSelect"
          style="margin-top: 20px;"
      >
        <!-- 复查信息（默认展示） -->
        <el-menu-item index="1">
          <i class="el-icon-document"></i>
          <span>复查信息</span>
        </el-menu-item>

        <!-- 药品信息 -->
        <el-menu-item index="2">
          <i class="el-icon-medkit"></i>
          <span>药品信息</span>
        </el-menu-item>

        <!-- 住院号管理 -->
        <el-menu-item index="3">
          <i class="el-icon-id-card"></i>
          <span>住院号管理</span>
        </el-menu-item>

        <!-- 用户管理（仅超级用户1可见） -->
        <el-menu-item v-if="authority === '超级用户1'" index="4">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </el-menu-item>

        <!-- 宣教信息 -->
        <el-menu-item v-if="authority !== '超级用户1'" index="5">
          <i class="el-icon-message"></i>
          <span>宣教信息</span>
        </el-menu-item>
      </el-menu>

      <!-- 返回登录按钮 -->
      <el-button
          type="primary"
          @click="goToLogin"
          style="position: absolute; bottom: 40px; left: 35px; width: 120px;"
      >
        返回登录
      </el-button>
    </el-aside>

    <!-- 主内容区 -->
    <el-container style="flex: 1; display: flex; flex-direction: column;">
      <el-header style="flex: 0 0 5%;">
        <div v-if="activeIndex === '1'">复查信息</div>
        <div v-if="activeIndex === '2'">药品信息</div>
        <div v-if="activeIndex === '3'">住院号管理</div>
        <div v-if="activeIndex === '4'">用户管理</div>
        <div v-if="activeIndex === '5'">宣教信息</div>
      </el-header>
      <el-main style="flex: 1; padding: 20px;">
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 仅导入页面组件（与FirstView同路径的components目录）
import Fuchaxinxi from './components/Fuchaxinxi.vue';
import Yaopingxinxi from './components/Yaopingxinxi.vue';
import Zhuyuanhaoguanli from './components/Zhuyuanhaoguanli.vue';
import Yonghuguanli from './components/Yonghuguanli.vue';
import Xuanjiaoxinxi from './components/Xuanjiaoxinxi.vue';

export default {
  components: {
    // 仅注册页面组件（无图标组件）
    Fuchaxinxi,
    Yaopingxinxi,
    Zhuyuanhaoguanli,
    Yonghuguanli,
    Xuanjiaoxinxi
  },
  data() {
    return {
      activeIndex: '1', // 默认选中复查信息
      currentComponent: 'Fuchaxinxi', // 默认展示复查信息组件
      authority: localStorage.getItem('authority') // 获取权限信息
    };
  },
  methods: {
    // 菜单选择切换组件
    handleSelect(index) {
      this.activeIndex = index;
      switch (index) {
        case '1':
          this.currentComponent = 'Fuchaxinxi';
          break;
        case '2':
          this.currentComponent = 'Yaopingxinxi';
          break;
        case '3':
          this.currentComponent = 'Zhuyuanhaoguanli';
          break;
        case '4':
          this.currentComponent = 'Yonghuguanli';
          break;
        case '5':
          this.currentComponent = 'Xuanjiaoxinxi';
          break;
        default:
          this.currentComponent = 'Fuchaxinxi';
      }
    },
    // 返回登录页
    goToLogin() {
      this.$router.push('/');
    }
  },
  created() {
    // 初始化默认组件
    this.handleSelect(this.activeIndex);
  }
};
</script>

<style scoped>
/* 保持与FirstView一致的样式 */
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

.el-main {
  background-color: #ffffff;
  color: #333;
}

.el-aside {
  background-color: #D3DCE6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.el-menu {
  width: 100%;
  border-right: none;
  background-color: #D3DCE6;
}
</style>